﻿/*
    CSS naming convention:

    - Dashboard core script maps all telemetry data properties to respective class names,
      so truck's speed will be .truck-speed and current gear is .truck-gear
      (see complete reference in Telemetry.md markdown file).
    - All boolean telemetry properties will have a special ".yes" class added
      when the value is true (will be removed if value is false).
    - When dashboard core script updates DOM it will always add
      data-value attribute containing current value, so you
      can use it to have custom css selectors based on the actual data
      (for example, this skin uses .truck-gear[data-value="N"] to define
      different style for neutral or reverse gear, see below).

    For more information go to home page: https://github.com/Funbit/ets2-telemetry-server

*/
body {
  cursor: pointer;
}
.hidden {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.dashboard {
  background-image: url("images/bg-off.png");
}
.dashboard.game-connected.yes {
  background-image: url("images/bg-on.png");
}
.truck-speed[data-type="meter"] {
  visibility: visible;
  position: absolute;
  left: 571px;
  top: 121px;
  width: 10px;
  height: 110px;
  background-color: #cd0000;
  -webkit-transform: rotate(-114deg);
  -moz-transform: rotate(-114deg);
  -ms-transform: rotate(-114deg);
  -o-transform: rotate(-114deg);
  transform: rotate(-114deg);
  -webkit-transform-origin: 50% 440px;
  -moz-transform-origin: 50% 440px;
  -ms-transform-origin: 50% 440px;
  -o-transform-origin: 50% 440px;
  transform-origin: 50% 440px;
}
.truck-engineRpm {
  position: absolute;
  left: 1580px;
  top: 105px;
  width: 10px;
  height: 110px;
  background-color: #cd0000;
  -webkit-transform: rotate(-97deg);
  -moz-transform: rotate(-97deg);
  -ms-transform: rotate(-97deg);
  -o-transform: rotate(-97deg);
  transform: rotate(-97deg);
  -webkit-transform-origin: 50% 336px;
  -moz-transform-origin: 50% 336px;
  -ms-transform-origin: 50% 336px;
  -o-transform-origin: 50% 336px;
  transform-origin: 50% 336px;
}
.truck-fuel {
  position: absolute;
  left: 1452px;
  top: 546px;
  width: 10px;
  height: 60px;
  background-color: #cd0000;
  -webkit-transform: rotate(-96deg);
  -moz-transform: rotate(-96deg);
  -ms-transform: rotate(-96deg);
  -o-transform: rotate(-96deg);
  transform: rotate(-96deg);
  -webkit-transform-origin: 50% 198px;
  -moz-transform-origin: 50% 198px;
  -ms-transform-origin: 50% 198px;
  -o-transform-origin: 50% 198px;
  transform-origin: 50% 198px;
}
.truck-waterTemperature {
  position: absolute;
  left: 1788px;
  top: 546px;
  width: 10px;
  height: 60px;
  background-color: #cd0000;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 198px;
  -moz-transform-origin: 50% 198px;
  -ms-transform-origin: 50% 198px;
  -o-transform-origin: 50% 198px;
  transform-origin: 50% 198px;
}
.truck-speedRounded,
.truck-cruiseControlSpeedRounded {
  color: #2491b9;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  left: 460px;
  top: 273px;
  width: 190px;
  height: 66px;
  text-align: right;
}
.truck-gear {
  color: #35b32e;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  left: 516px;
  top: 692px;
  width: 134px;
  height: 100px;
  text-align: center;
}
.truck-gear[data-value="N"] {
  color: #2c8a26;
}
.truck-gear[data-value="R"] {
  color: #ddff00;
}
.truck-odometer {
  color: #1a6783;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  left: 376px;
  top: 563px;
  width: 368px;
  height: 70px;
  text-align: right;
}
.truck-blinkerLeftOn {
  background-image: url("images/blinker-left-off.png");
  position: absolute;
  left: 98px;
  top: 78px;
  width: 102px;
  height: 92px;
}
.truck-blinkerLeftOn.yes {
  background-image: url("images/blinker-left-on.png");
}
.truck-blinkerRightOn {
  background-image: url("images/blinker-right-off.png");
  position: absolute;
  left: 950px;
  top: 78px;
  width: 102px;
  height: 92px;
}
.truck-blinkerRightOn.yes {
  background-image: url("images/blinker-right-on.png");
}
.truck-cruiseControlOn {
  background-image: url("images/cruise-off.png");
  position: absolute;
  left: 687px;
  top: 434px;
  width: 82px;
  height: 72px;
}
.truck-cruiseControlOn.yes {
  background-image: url("images/cruise-on.png");
}
.truck-cruiseControlSpeedRounded {
  color: #24b999;
  top: 431px;
}
.truck-lightsBeamHighOn {
  background-image: url("images/highbeam-off.png");
  position: absolute;
  left: 1358px;
  top: 860px;
  width: 123px;
  height: 90px;
}
.truck-lightsBeamHighOn.yes {
  background-image: url("images/highbeam-on.png");
}
.truck-lightsBeamLowOn {
  background-image: url("images/lowbeam-off.png");
  position: absolute;
  left: 1358px;
  top: 954px;
  width: 123px;
  height: 90px;
}
.truck-lightsBeamLowOn.yes {
  background-image: url("images/lowbeam-on.png");
}
.truck-lightsParkingOn {
  background-image: url("images/parklights-off.png");
  position: absolute;
  left: 1484px;
  top: 904px;
  width: 104px;
  height: 98px;
}
.truck-lightsParkingOn.yes {
  background-image: url("images/parklights-on.png");
}
.trailer-attached {
  background-image: url("images/trailer-off.png");
  position: absolute;
  left: 1726px;
  top: 890px;
  width: 278px;
  height: 152px;
}
.trailer-attached.yes {
  background-image: url("images/trailer-on.png");
}
.trailer-mass {
  color: #3e3b60;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 40px;
  position: absolute;
  left: 1770px;
  top: 906px;
  width: 200px;
  height: 80px;
  text-align: center;
}
.trailer-name {
  color: #222;
  font-family: Arial, Tahoma;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  left: 1742px;
  top: 952px;
  width: 242px;
  height: 80px;
  text-align: center;
  overflow: hidden;
}
.game-time {
  color: #C2D8ED;
}
.job-remainingTime {
  color: #54d9a8;
}
._jobIncome {
  color: #5dd954;
}
.truck-gear,
.truck-blinkerLeftOn,
.truck-blinkerRightOn,
.truck-cruiseControlOn,
.truck-lightsBeamHighOn,
.truck-lightsBeamLowOn,
.truck-lightsParkingOn,
.truck-odometer,
.truck-speedRounded,
.truck-cruiseControlSpeedRounded[data-value="0"],
.trailer-mass,
.trailer-name,
._truckWearInfo,
._trailerWearInfo,
.job-remainingTime,
._jobIncome,
._jobSource,
._jobDestionation {
  visibility: hidden;
}
.dashboard.game-connected.yes .truck-blinkerLeftOn,
.dashboard.game-connected.yes .truck-blinkerRightOn,
.dashboard.game-connected.yes .truck-cruiseControlOn,
.dashboard.game-connected.yes .truck-lightsBeamHighOn,
.dashboard.game-connected.yes .truck-lightsBeamLowOn,
.dashboard.game-connected.yes .truck-lightsParkingOn,
.dashboard.game-connected.yes .truck-gear,
.dashboard.game-connected.yes ._truckWearInfo,
.dashboard.game-connected.yes ._trailerWearInfo,
.dashboard.game-connected.yes .truck-odometer,
.dashboard.game-connected.yes .truck-speedRounded,
.dashboard.game-connected.yes .truck-cruiseControlSpeedRounded:not([data-value="0"]) {
  visibility: visible;
}
.hasJob.yes .trailer-mass,
.hasJob.yes .trailer-name,
.hasJob.yes .job-remainingTime,
.hasJob.yes ._jobIncome,
.hasJob.yes ._jobSource,
.hasJob.yes ._jobDestionation {
  visibility: visible;
}
table._job {
  border-collapse: collapse;
  font-family: Courier New, Courier, monospace;
  font-size: 40px;
  position: absolute;
  left: 40px;
  top: 850px;
  width: 1300px;
  height: 280px;
}
table._job th {
  color: #aaa;
  width: 260px;
  text-align: right;
}
table._job td {
  padding-left: 20px;
  text-align: left;
}
._jobSource,
._jobDestionation {
  color: #efbd3a;
}
.statusMessage {
  color: coral;
}
._truckWearInfo,
._trailerWearInfo {
  font-family: Courier New, Courier, monospace;
  font-size: 26px;
  position: absolute;
  left: 1600px;
  top: 1066px;
  width: 330px;
  height: 30px;
  text-align: left;
  color: #aaa;
  line-height: 90%;
}
._trailerWearInfo {
  left: 1810px;
}
.truck-wearSum,
.trailer-wear {
  font-size: 44px;
  color: orangered;
}
